<template>
  <div>
    <!-- <p @click="backtop">TOP</p> -->
    <van-icon class="top" name="back-top" @click="backtop" v-if="isShow"/>
  </div>
</template>

<script>
export default {
//   data () {
//     return {
//       scrollTop: '',
//       goTopShow: false
//     }
//   },
//   watch: {
//     scrollTop (val) {
//       if (this.scrollTop > 500) {
//         this.goTopShow = true
//       } else {
//         this.goTopShow = false
//       }
//     }
//   },
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.showbtn, true)
  },
  methods: {
    // 显示回到顶部按钮
    showbtn () {
      const that = this
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (scrollTop > 300) {
        // window.pageYOffset:获取滚动距离
        this.isShow = true
      } else if (scrollTop < 300) {
        this.isShow = false
      }
    },
    /**
        * 回到顶部功能实现过程：
        * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
        * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
        * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
        * 4. 最后记得在移动到顶部时，清除定时器
      */
    backtop () {
      var timer = setInterval(function () {
        const osTop = document.documentElement.scrollTop || document.body.scrollTop
        const ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    }
    // // 计算滚动条位置
    // computeScroll () {
    //   const self = this
    //   self.evUtils.addHandler(window, 'scroll', function () {
    //     self.showGoTop = self.elUtils.getDocScrollTop() >= self.scrollParam.distance
    //   })
    // }
  }
}
</script>

<style>
.top {
    position: fixed;
    font-size: 30px;
    right: 15px;
    bottom: 65px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    padding: 10px;
    cursor: pointer;
    /* box-shadow: 0 0 6px rgba(136, 42, 42, 0.12); */
}
</style>
